<template>
  <view class="vip-detail-container">
    <view class="user-section">
      <image class="avatar" :src="userInfo.avatarurl || '/static/default-avatar.png'" />
      <view class="user-info">
        <view class="user-name">{{ userInfo.name || '未登录' }}</view>
        <view class="vip-status" v-if="vipInfo">
          <image class="vip-badge" src="/static/vip/vip.png" />
          <text class="vip-label">会员中</text>
        </view>
        <view class="vip-status" v-else>
          <text class="vip-label gray">非会员</text>
        </view>
      </view>
      <view class="record-button" @tap="goToRecord">
        <text>消费记录</text>
      </view>
    </view>
    <view class="vip-info-card" v-if="vipInfo">
      <view class="vip-row">
        <text class="label">会员开始时间：</text>
        <text class="value">{{ formatDate(vipInfo.createTime) }}</text>
      </view>
      <view class="vip-row">
        <text class="label">会员结束时间：</text>
        <text class="value">{{ formatDate(vipInfo.updateTime) }}</text>
      </view>
      <view class="vip-row">
        <text class="label">剩余天数：</text>
        <text class="value highlight">{{ vipInfo.number || 0 }} 天</text>
      </view>
    </view>
    <view v-else class="no-vip">暂无会员信息</view>
    <!-- 会员卡片列表 -->
    <view class="vip-list">
      <!-- 购买会员卡片 -->
      <view class="card-group">
        <view class="group-header">
          <text class="title">购买会员</text>
          <text class="tag buy">购买</text>
        </view>
        <view class="card-wrapper">
          <view class="vip-card purchase" v-for="item in purchaseList" :key="item.id">
            <view class="card-icon">
              <image src="/static/vip/icon-crown.png" mode="aspectFit" />
            </view>
            <view class="card-content">
              <view class="duration">{{item.memberDuration}}天</view>
              <view class="price">¥{{item.price}}</view>
              <button class="purchase-btn" @click="handlePurchase(item)">立即购买</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 会员权益 -->
    <view class="vip-benefits">
      <view class="benefits-header">
        <text class="title">会员权益</text>
      </view>
      <view class="benefits-list">
        <view class="benefit-item" v-for="(benefit, index) in benefits" :key="index">
          <image class="icon" :src="benefit.icon" mode="aspectFit"></image>
          <text class="text">{{benefit.text}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: 1, // 开发阶段写死
      userInfo: {},
      vipInfo: null,
      purchaseList: [],
      benefits: [
        {
          icon: '/static/vip/icon-badge.png',
          text: '专属身份标识'
        },
        {
          icon: '/static/vip/icon-beans.png',
          text: '每日签到双倍欢乐豆'
        },
        {
          icon: '/static/vip/icon-priority.png',
          text: '专属活动优先参与'
        }
      ],
      loading: false
    }
  },
  onLoad() {
    this.getVipDetail();
    this.getMemberInfo();
  },
  methods: {
    async getVipDetail() {
      try {
        const res = await uni.request({
          url: 'http://127.0.0.1:9224/user/ByVip',
          method: 'GET',
          data: { userId: this.userId }
        });
        if (res.data && res.data.code === 200 && res.data.data) {
          this.vipInfo = res.data.data;
          this.userInfo = res.data.data;
        } else {
          this.vipInfo = null;
        }
      } catch (e) {
        this.vipInfo = null;
      }
    },
    async getMemberInfo() {
      try {
        const res = await uni.request({
          url: `http://localhost:9224/member/info`,
          method: 'GET',
          data: {
            userId: this.userId
          }
        })
        if (res.data.code === 200) {
          const data = res.data.data
          this.purchaseList = data.purchaseList || []
        }
      } catch (error) {
        // ignore
      }
    },
    async handlePurchase(item) {
      // if (this.loading) return
      // this.loading = true
      try {
        // 注释或移除原有的购买接口调用
        // const res = await uni.request({
        //   url: 'http://localhost:9224/member/purchase',
        //   method: 'POST',
        //   header: {
        //     'content-type': 'application/json'
        //   },
        //   data: {
        //     userId: this.userId,
        //     typeId: item.id,
        //     manner: 1 // 1表示购买
        //   }
        // })
        // if (res.data.code === 200) {
        //   uni.showToast({
        //     title: '购买成功',
        //     icon: 'success'
        //   })
        //   await this.getMemberInfo()
        // } else {
        //   uni.showToast({
        //     title: res.data.msg || '购买失败',
        //     icon: 'none'
        //   })
        // }

        // 修改为跳转到支付页面，并传递参数
        uni.navigateTo({
          url: `/pages/sign/payment?vipType=${item.memberDuration}天&amount=${item.price}`
        });

      } catch (error) {
        console.error('跳转支付页面失败：', error)
        uni.showToast({
          title: '跳转支付失败',
          icon: 'none'
        })
      } finally {
        // this.loading = false
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return '-';
      const date = new Date(dateStr);
      const y = date.getFullYear();
      const m = String(date.getMonth() + 1).padStart(2, '0');
      const d = String(date.getDate()).padStart(2, '0');
      return `${y}-${m}-${d}`;
    },
    goToRecord() {
      // Implement the logic to navigate to the record page
      // console.log('Going to record');
      uni.navigateTo({
        url: '/pages/sign/record'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.vip-detail-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 40rpx 24rpx;
  .user-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 18rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08);
    margin-bottom: 32rpx;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 28rpx;
      background: #eee;
    }
    .user-info {
      flex: 1;
      .user-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      .vip-status {
        display: flex;
        align-items: center;
        .vip-badge {
          width: 40rpx;
          height: 40rpx;
          margin-right: 8rpx;
        }
        .vip-label {
          font-size: 28rpx;
          color: #faad14;
          &.gray {
            color: #bbb;
          }
        }
      }
    }
  }
  .record-button {
    background: #07c160;
    color: #fff;
    border: none;
    border-radius: 28rpx;
    font-size: 26rpx;
    font-weight: 500;
    padding: 10rpx 20rpx;
    margin-left: 20rpx;
    flex-shrink: 0;
  }
  .vip-info-card {
    background: #fff;
    border-radius: 18rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08);
    .vip-row {
      display: flex;
      align-items: center;
      margin-bottom: 18rpx;
      .label {
        font-size: 30rpx;
        color: #888;
        width: 200rpx;
      }
      .value {
        font-size: 30rpx;
        color: #222;
        &.highlight {
          color: #07c160;
          font-weight: bold;
        }
      }
    }
  }
  .no-vip {
    text-align: center;
    color: #bbb;
    font-size: 32rpx;
    margin-top: 80rpx;
  }
  .vip-list {
    margin-top: 32rpx;
    .card-group {
      background: #fff;
      border-radius: 18rpx;
      padding: 32rpx 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08);
      margin-bottom: 32rpx;
      .group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18rpx;
        .title {
          font-size: 30rpx;
          font-weight: bold;
        }
        .tag {
          padding: 4rpx 18rpx;
          background: #faad14;
          color: #fff;
          border-radius: 20rpx;
          font-size: 24rpx;
        }
      }
      .card-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 24rpx;
        justify-content: center;
        .vip-card {
          background: #fff;
          border-radius: 16rpx;
          box-shadow: 0 2rpx 8rpx rgba(7,193,96,0.08);
          border: 2rpx solid #f0f0f0;
          width: 200rpx;
          margin-bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 32rpx 0 24rpx 0;
          transition: box-shadow 0.2s, border-color 0.2s;
          .card-icon {
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 12rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            image {
              width: 48rpx;
              height: 48rpx;
            }
          }
          .card-content {
            text-align: center;
            .duration {
              font-size: 28rpx;
              color: #222;
              margin-bottom: 4rpx;
              font-weight: bold;
            }
            .price {
              font-size: 28rpx;
              color: #faad14;
              margin-bottom: 8rpx;
              font-weight: bold;
            }
            .purchase-btn {
              width: 110%;
              height: 60rpx;
              background: linear-gradient(90deg, #07c160 0%, #34d399 100%);
              color: #fff;
              border: none;
              border-radius: 28rpx;
              font-size: 26rpx;
              margin-top: 12rpx;
              font-weight: 500;
              box-shadow: 0 2rpx 8rpx rgba(7,193,96,0.10);
            }
          }
        }
      }
    }
  }
  .vip-benefits {
    background: #fff;
    border-radius: 18rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08);
    .benefits-header {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 18rpx;
    }
    .benefits-list {
      display: flex;
      align-items: center;
      .benefit-item {
        width: 33.33%;
        text-align: center;
        .icon {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 4rpx;
        }
        .text {
          font-size: 28rpx;
          color: #222;
        }
      }
    }
  }
}
</style> 